<template>
  <div class="device-status-container" :style="{
    width: `${width}px`,
    height: `${height}px`,
  }">
    <div class="online-title">{{ titleName }}</div>
    <div class="online-process">
      <el-row :gutter="3">
        <el-col :span="20">
          <div class="online-process-box">
            <div class="online-item" v-for="(item, index) in onlinePartNum" :key="index" 
              :style="{ 
                'border-right': index == onlinePartNum - 1 ? 'none' : '2px solid #12375C',
                'width': `${avgWidth}px` 
              }">
            </div>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="device-total" :style="{width: `${avgWidth}px`}">{{ totalNum }}</div>
        </el-col>
      </el-row>
    </div>
    <el-row style="margin-top: 5px;">
      <el-col :span="12">
        <span class="online-subtitle">{{ onlineTitle }}</span>
        <span class="online-num-info">{{ onlineNum }}</span>
      </el-col>
      <el-col :span="12">
        <span class="online-subtitle">{{ offlineTitle }}</span>
        <span class="online-num-info" style="color: #de4a4c;">{{ offlineNum }}</span>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue';

// 定义 props
const props = defineProps({
  options: {
    type: Object,
    default: () => ({
      width: 400,
      height: 150,
      titleName: '在线情况',
      totalNum: 0,
      onlineTitle: '在线数',
      onlineNum: 0,
      offlineTitle: '离线数',
      offlineNum: 0
    })
  }
});

// 响应式状态
const width = ref(400);
const height = ref(150);
const titleName = ref('在线情况');
const onlinePartNum = ref(0);
const totalNum = ref(0);
const onlineTitle = ref('在线数');
const onlineNum = ref(0);
const offlineTitle = ref('离线数');
const offlineNum = ref(0);
const barWidth = ref(220);
const avgWidth = ref(35);

// 监听 options 变化
watch(() => props.options, (val) => {
  if (val.width) {
    width.value = val.width;
    let newBarWidth = val.width - 20;
    barWidth.value = newBarWidth;
    avgWidth.value = Math.floor((newBarWidth - 12) / 6);
  }
  if (val.height) {
    height.value = val.height;
  }
  if (val.titleName) {
    titleName.value = val.titleName;
  }
  if (val.totalNum) {
    totalNum.value = val.totalNum;
  }
  if (val.onlineTitle) {
    onlineTitle.value = val.onlineTitle;
  }
  if (val.onlineNum) {
    onlineNum.value = val.onlineNum;
  }
  if (val.offlineTitle) {
    offlineTitle.value = val.offlineTitle;
  }
  if (val.offlineNum) {
    offlineNum.value = val.offlineNum;
  }
  
  if (totalNum.value && onlineNum.value) {
    onlinePartNum.value = Math.floor(onlineNum.value / totalNum.value * 5);
    console.info(onlinePartNum.value);
  }
}, { 
  deep: true, 
  immediate: true 
});
</script>

<style scoped lang="less">
.online-title {
  font-size: 18px;
  font-family: 'Source Han Sans CN';
  font-weight: bold;
  color: #fff;
}

.device-total {
  position: absolute;
  right: 0;
  font-size: 18px;
  font-family: DIN;
  font-weight: bold;
  color: #4bf3f9;
  text-align: right;
}

.online-subtitle {
  font-size: 14px;
  font-family: 'Source Han Sans CN';
  font-weight: 400;
  color: #fff;
}

.online-process {
  width: calc(100% - 20px);
  height: 28px;
  line-height: 28px;
  padding: 0 10px;
  margin-top: 10px;
  border: 1px solid #869fff;
  .online-process-box {
    background: linear-gradient(90deg, #041749 0%, #3de6f6 100%);
    width: auto;
    height: auto;
    margin-top: 6px;
    display: flex;
    position: absolute;
  }

  .online-item {
    width: 35px;
    height: 16px;
    border-right: 2px solid #12375c;
  }
}

.online-num-info {
  font-size: 18px;
  font-family: DIN;
  font-weight: bold;
  color: #4bf3f9;
  margin-left: 10px;
}
</style>
